<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="https://image.xiaoandx.club/favicon.ico"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title>软件工程18-9班在线查询家庭情况调查表</title>
	<style type="text/css">
			.mains{
				margin: 0 auto;
				padding: 30px;
			}
			.submitStyle{
				margin-top: 30px;
			}
			.mainTitle{
				text-align: center;
				color: #17a2b8;
				font-weight: 900;
				margin-bottom: 30px;
			}
			.present{
				color: #ff2020;
				margin-bottom: 30px;
			}
			.present h4{
				font-weight: 700;
				line-height:22px
			}
			.slays{
				margin-top: 50px;;
			}

		</style>
	</head>
	<body style="width: 100%;">
		<div class="mains">
			<div class="heads">
				<div class="titleStyle">
					<h2 class="mainTitle">在线查询纸质家庭情况调查表</h2>
					<div class="present">
						<h4>请如实填写学号随后将查询家庭情况调查表，以图片展示长按保存下载</h4>
					</div>
				</div>
				<div class="seach">
					  <div class="form-group">
						<label for="studentId">学&nbsp;&nbsp;&nbsp;号：</label>
						<input type="text" class="form-control" id="studentId" placeholder="你的学号">
					  </div>
					  <div class="submitStyle">
						<button id="button1" type="submit" class="btn btn-info  btn-block">查&nbsp;&nbsp;&nbsp;询</button>
					  </div>
				</div>
				
				<div class="slays">
					  <img src="" alt="家庭情况调查表" class="img-thumbnail">
				</div>
			</div>
		</div>
	</body>
		<script type="text/javascript">
		  
			/**
			 * 
			 *    _    _      _ _         _______ _                 _         __      ___               
			 * 	 | |  | |    | | |       |__   __| |               | |        \ \    / (_)              
			 *	 | |__| | ___| | | ___      | |  | |__   __ _ _ __ | | _____   \ \  / / _  _____      __
			 *	 |  __  |/ _ \ | |/ _ \     | |  | '_ \ / _` | '_ \| |/ / __|   \ \/ / | |/ _ \ \ /\ / /
			 *	 | |  | |  __/ | | (_) |    | |  | | | | (_| | | | |   <\__ \    \  /  | |  __/\ V  V / 
			 *	 |_|  |_|\___|_|_|\___/     |_|  |_| |_|\__,_|_| |_|_|\_\___/     \/   |_|\___| \_/\_/  
			 * 
             *	Copyright (c) 2020 WEI.ZHOU. All rights reserved.                           
             *	The following code snippets are only used for circulation and cannot be used for business.      
             *	If the code is used, no consent is required, but the author has nothing to do with any problems and consequences.                                                                                   
             *	In case of code problems, feedback can be made through the following email address.         
             *	                            <xiaoandx@gmail.com>  
			 * @author xiaoandx
			 * @time 2020-05-24 10:21:56
			 */
		  
			var API_PATH = "https://image.xiaoandx.club/";
			var studentId = 0;
			var nones = {display:"none"};
				$(function(){
					$(".slays").css(nones);
				})
				
				$("#button1").click(function(){
					if($("#studentId").val()==""){
						alert("学号为空重新输入查询");
					}else{
						var urls = API_PATH+$("#studentId").val()+".jpg";
						$(".img-thumbnail").attr("src",urls);
						$(".seach").css(nones);
						$(".slays").show();
					}
				});
		</script>
</html>